<template>
    <div class="admin">
      <el-container class="wrapper">
        <el-header class="header">
          <div class="logo"></div>
          <div class="nav-header">
            <el-menu background-color="#383462" active-text-color="#FF9E11" text-color="#FFCD13"  class="el-menu-demo top-nav" mode="horizontal" >
              <el-menu-item index="1" >处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>
            <div class="line"></div>
          </div>
          <div class="user"></div>
        </el-header>
        <el-container>
          <el-aside width="203px" class="aside">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo nav-left"
                background-color="#383462"
                text-color="#fff"
                active-text-color="#ffd04b"
                style="overflow: hidden"
                router
                :default-active="editableTabsValue"
              >
                <el-submenu :index="'admin/'+item.index" v-for="item in navList" :key="item.index" >
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{item.fistClassName}}</span>
                  </template>
                  <el-menu-item :index="row.index" :key="row.index" v-for="row in item.secondClassList" v-if="!row.thirdClassList">{{row.secondClassName}}</el-menu-item>
                  <el-submenu :index="row.index" :key="row.index" v-for="row in item.secondClassList" v-if="row.thirdClassList">
                    <template slot="title">{{row.secondClassName}}</template>
                    <el-menu-item :index="obj.index" v-for="obj in row.thirdClassList" :key="obj.index">{{obj.thirdClassName}}</el-menu-item>
                  </el-submenu>
                </el-submenu>
              </el-menu>
          </el-aside>
          <el-container>
            <div class="tabs-wrapper">
              <div class="tabs">
                  <div class="tabs-content" >
                    <el-tabs v-model="editableTabsValue" type="border-card" editable @edit="_handleTabsEdit" >
                        <el-tab-pane
                          :key="item.name"
                          v-for="item in editableTabs"
                          :label="item.title"
                          :name="item.name"
                        >
                          {{}}
                        </el-tab-pane>
                    </el-tabs>
                  </div>
              </div>
            </div>
            <el-main class="content">
              <router-view></router-view>
            </el-main>
            <el-footer class="footer">Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
</template>

<script>
  import {getSession,setSession} from "../../common/js/sessionStorage";

  export default {
      name: "admin",
      data() {
        return {
          navList:[
            {
              fistClassName:'导航一',
              index:'1',
              secondClassList:[
                {
                  secondClassName:'选项一',
                  index:'test1',
                },{
                  secondClassName:'选项二',
                  index:'1-2',
                  thirdClassList:[
                    {
                      thirdClassName:'三级1',
                      index:'test2',
                    }
                  ]
                },
              ]
            }
          ],
          editableTabsValue: 'index',
          editableTabs: [
            {
              title: '主页',
              name: 'index',
            }
          ],
          tabIndex: 2
        }
      },
      methods: {
        //删除标签页
        _handleTabsEdit(targetName, action) {
          if (action === 'remove') {
            if(targetName==='index'){
              return
            }
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
              tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                  let nextTab = tabs[index + 1] || tabs[index - 1];
                  if (nextTab) {
                    activeName = nextTab.name;
                  }
                }
              });
            }
            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
          }
        },
        //启动会话初始化
        _initRun(){
          if(getSession('editableTabs')===null||getSession('editableTabsValue')===null){
            setSession('editableTabs',[{
              title: '主页',
              name: 'index',
            }])
            setSession('editableTabsValue','index')
            this.$router.push({name:'index'})
          }
          this.editableTabs = getSession('editableTabs')
          this.editableTabsValue = getSession('editableTabsValue')
        }
      },
      mounted() {
        this._initRun()
      },
      watch:{
        //监听当前index跳转到相适配路由
        'editableTabsValue'(){
          this.$router.push({name:this.editableTabsValue})
        },
        //监听路由变化，适配到nav导航栏和标签页
        '$route'(){
          let addFlag = false
          for(let i=0;i<this.editableTabs.length;i++){
            if(this.editableTabs[i].title===this.$route.meta.title){
              addFlag = true
              break
            }else {
              addFlag = false
            }
          }
          if(!addFlag){
            this.editableTabs.push({title:this.$route.meta.title,name:this.$route.name})
          }
          this.editableTabsValue = this.$route.name
          setSession('editableTabs',this.editableTabs)
          setSession('editableTabsValue',this.editableTabsValue)
        }
      }
  }
</script>

<style scoped lang="stylus">
  .admin
    height 100%
    background #2ab27b
    .wrapper
      height 100%
      background #ffffff
      .header
        background #383462
        overflow hidden
        display flex
        .logo
          flex 0 0 200px
        .nav-header
          flex 1
        .top-nav
          overflow hidden
        .user
          flex 0 0 200px
      .aside
        background #383462
        overflow hidden
        .nav-left
          width 200px
          border-right 0px
      .footer
        background #383462
      .content
        background #ffffff
        overflow hidden
        position relative
        z-index 1000
      .el-menu::after,.el-menu::before
        display none !important
      .tabs-wrapper
        height 40px
        background #e8e8e8
        border-radius 3px
        overflow hidden
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
        .tabs
          .tabs-content
            float left
            width 100%
            height 44px
            font-size 0
            overflow hidden
            .tabs-container
              position relative
              left 0
              height 100%
              width 1300px
              .tab
                height 100%
                width 99px
                background #F7C20F
                float left
                border-right 1px solid #ffffff
            &:hover
              color #449fdb
              background #d2d2d2







</style>
